Poster made with Touchdesigner TUTORIAL 001

90分ネタ

hr.icon

1. はじめに

本演習では、Javier Casadidio氏が公開しているポスターデザインのチュートリアルを利用する。

ポスターという平面デザインだが制作手法ではあるが、動的な映像の一場面を切り取る手法であり、静止画や動画含めた様々なビジュアルデザイン制作に応用できる手法となっている。

Windowsで開発されたチュートリアルなので、カスタムカラーパレットがうまく動作しない

全体的には機能するので内容理解には問題ない

https://gyazo.com/a1e13b6c44d2f69b96e5a37c14ac5368

https://gyazo.com/10b060a206f1ddf9cac0ec7f6068bb94

hr.icon

2. TouchDesignerの起動と準備

TouchDesignerを起動後、スタートアップオペレータは削除して、Paletteを閉じる。

https://gyazo.com/8849f702f97ceda9588109fc1ef6ce9f

hr.icon

以降、多数の手順がある。順を追って解説する。

3. Constant CHOP

２つの定数を作成する。

resw: 980

resh: 1280

https://gyazo.com/f5b5d6b1f72c1f3ac1a7afb78067743f

hr.icon

4. Noise TOP

Noise TOPを追加して、Noise TOPのCommonタブ > Resolutionに、先ほどのresw、reshをパラメータリンクする。

この方法により、複数のオペレータのResolution（解像度）を一括変更することが可能になる。

https://gyazo.com/4d00cd378d6b5f52820eab396b1d662f

Pixel Format: 32-bit float (RGBA)に変更する。

https://gyazo.com/a14c681adeff0de1f985f5993e193e0b

一般的は8bitよりも色数や階調の細かい表現が可能になる。PC負荷は高い。

8bit: 256色

16bit: 65,536色

32bit: 16,777,216色

Noise CHOPのNoiseタブで以下に設定する。

Type: Perlin4D (GPU)

Seed: 1

Period: 2

Harmonics: 1

Harmonic Spread: 4

Harmonic Gain: 0.15

Expornent: 0.8

Amplitude: 0.3

Offset: 0.5

https://gyazo.com/b5e0f2d38ed0c7f4f4594cda3d998524

Noise CHOPのTransformタブで以下を設定する。

Scale: 0.5, 2, 2

Translate 4Dパラメータをアニメーションさせる

左+を開いて、absTime.seconds/5を入力

https://gyazo.com/fbfd1c8a4e91e6d878d0747df98cfd70

hr.icon

5. Displace TOP

Displace TOPを追加する。

Displace TOPの２つの入力（Source Image, Displace Image）の両方にNoise TOPを接続する。

この手法により、流体的な表現が生まれる。

https://gyazo.com/930e5ffaf949b6ffaa35bf51fcdeb08e

hr.icon

6. Limit TOP

Limit TOPを追加して、Displace TOPの出力を接続する。

Quantizeタブを以下の設定にする。

Quantize Value: Floor

Value Step: 0.035

Value Offset: 1

これにより一時的にポスタリゼーション（階調を下げる表現）が生まれる。

https://gyazo.com/ee419d00fe42c388bb6ca257447bbb09

hr.icon

7. Blur TOP

Blur TOPを追加して、Limit TOPの出力を接続する。

Blurタブの以下を設定する。

Pre-Shrink: 4

Filter Size: 32

Limit TOPでポスタリゼーションして、Blur TOPでボカすことは一見意味のないことのように思えるが、パラメータによってそれぞれのバランスを調整することで、最終画像の微細な表現（凹凸感や滑らかさの濃淡）を調整するためのプロセスだと考えられる（私見）。

https://gyazo.com/6ae97ed7c8e4cc94c2b3d287cd48a728

ここまでの全体のネットワーク

https://gyazo.com/686584fd17fc3a2672de4816b3480aec

hr.icon

8. Lookup TOPとカスタムカラーパレット

8.1 Lookup TOPの追加

Lookup TOPをBlur TOPの出力に接続する。若干離して配置する。

https://gyazo.com/9412714af48cf905a4c9a014b33a29a8

8.2 COLOUR LOVER PALETTE PICKER（Win用）

Win用なので、一部の機能が利用できない

Lookup TOPには何等かのカラーパレットが必要となる。

今回はDerivativeサイトで公開されているCOLOUR LOVER PALETTE PICKERを利用する。

下記URLのページ下方（下図）ASSET DOWNLOADSからダウンロードできる。

https://gyazo.com/a889c98e97c43927511fb6e9d14d9ab8

ダンロードしたcolour_lovers_picker_1.toxをTouchDesignerにドラック＆ドロップする。

下図のようにバージョン違いの警告が出るがOKを押す。

https://gyazo.com/4ff0092ac6f896f1c3c1b1a18e54317d

読み込みには若干時間を要するので待つ。何度もドラック＆ドロップしない。

下図のように配置する。

https://gyazo.com/11a89a32b76000e7a48e9f2dc31d2e53

colour_lovers_pickerのOutput 0 (TOP)からNull TOPに接続する。

Null TOPからLookup TOPのInput 1Lookup Imageに接続する。

https://gyazo.com/5f6da45ca03dfb44cef6b18c522f1e90

Lookup TOPの状態がNullに表示されたカラースケールで色付けされる。

https://gyazo.com/c47b034dccf142c89c13f9f6fce85dbd

無理にする必要はないが、Nul TOPのCommonタブでViewer Smoothness: Use Inputに変更すれば、YouTubeチュートリアルのように５段階の階調表示になる。あくまでカラースケールのプレビューの表示状態の変更なので、最終処理には影響しない。

https://gyazo.com/8d561711bf7456837d76c8e5d73eb355

colour_lovers_picker COMPをアクティブにすればUIを操作することができる。

上部のメニュー（TOP, NEW, RANDOM, HUE, FAVOITES）をクリックして、カラーパレットを選択する。

Macでは２段目のメニュー（Refresgh TOP 100等）はScript Errorになるので利用しない。

https://gyazo.com/006b4a5719d414ad7494143167371676

hr.icon

9. Circle TOP

Circle TOPを追加する

Circle TOPのCommonタブのResolutionに、constant1をパラメータリンクする

https://gyazo.com/e4a3eba66d041394cb1277f4e7cfb4aa

hr.icon

10. Composite TOP

Composite TOPを追加する

Lookup TOPとCircle TOPの出力をComposite TOPに入力する

https://gyazo.com/3a146d6f48130ff62da4efb3a0ec0a6d

hr.icon

11. Level TOP

Level TOPを追加する

Level TOPのPreタブのGanmma 1: 2に設定する

https://gyazo.com/f8ebd44931fa0ff445f785f0be87f094

hr.icon

12. Displace TOP（２つ目）

Displace TOPを追加する

Circle TOPをDisplace TOPのInput 0: Source Imageに接続する

Lookup TOPをDisplace TOPのInput 1: Displace Imageに接続する

Displace TOPのDisplaceタブで以下のパラメータに設定する

Source Midpoint: 0, 0

Displace Weight: 0, 0.1

Offset: 0, 0

Extend: Zero

https://gyazo.com/2ae4d2dbd031f52d25a1e5b5ed219ee7

hr.icon

13. Composite TOP（２つ目）

Composite TOPを追加する

Lookup TOPとDisplace TOPをComposite TOPの入力に接続する

Composite TOPのCompositeタブのOperation: Luminance Differenceに変更する（他のものも試してみる）

Input OPの順序を入れ替えてみる

https://gyazo.com/aca04b0a79c63f0ce26f4d7452d1bfdf

colour_lovers_picker COMPのカラースケールによっても印象やコントラストが変わる。

いろいろ試してみる。

この段階で色味は確定ではない。

https://gyazo.com/1c08a5cf5b75e38b9a85df72853e449b

hr.icon

14. Select TOP

Select TOPは他のTOPのインスタンスを作成するオペレータ。

colour_lovers_picker COMP付近にSelect TOPを追加する

Null TOPをSelect TOPの上にドラッグ＆ドロップする

https://gyazo.com/516eafd2437931129d3f649e72a195fc

hr.icon

15. Lookup TOP（2つ目）

Lookup TOP（2つ目、lookup2）を追加する

Composite TOP（２つ目、comp2）とSelect TOPの出力をLookup TOPに入力する

https://gyazo.com/c0a4c255f4f1820978ff3163a6c94d4d

hr.icon

16. Level TOP（２つ目）

Level TOP（２つ目）を追加する

Level TOPのGammmaを上げる（Brightnessでも明るくなるがコントラストが高い）好みでよい

https://gyazo.com/fcae84ba665a08097aa1fc462fc9814e

hr.icon

17. Null TOP（2つ目）

Null TOP（2つ目）を追加する

名称をbgに変更する

DisplayをONにしてバックドロップ表示させる

https://gyazo.com/9e51184cd5d514ba72e5e656df132232

hr.icon

18. Circle TOPのSoftnessの変更

Circle TOPのSoftnessを変更すると円のエッジの印象を変更できる。

https://gyazo.com/303844beb1d926082d6aaf67a7bb53d6

hr.icon

19. 最終調整

以下を調整することで、様々なバリエーションを作成できる。

カラーパレット

Level TOP（１つ目）のGamma調整：円の見え方

Level TOP（２つ目）のGamma調整：全体のコントラスト

https://gyazo.com/a72ca0cd89d1c38de6c7df087cf83ccb

hr.icon

20. （おまけ）図形や文字へ変更

Circle TOPをText TOPやMovie File In TOPにすることで、文字、図形、写真（動画も？AEの方がいいかも）を表示することもできる。いろいろ試してみよう。

https://gyazo.com/88a81976a0180f65b7c1a4a16a253fcc

https://gyazo.com/2659de54bef93926388371ad276936f8

hr.icon

21. 静止画の保存方法

21.1 方法① Movie File Outの利用

Movie File Outを最終出力に接続する

Type: Image

Image File Type: JPEG

File: 場所を指定

RecordをON/OFFするかAdd Frameを押す

注意点）はじめて利用する保存先の場合、出力されないことがある

もう一つの画像保存の方法（TOPを右クリックしてSave Image）を行った後だと、上記の方法が可能になる。TouchDesignerにアクセス権限が発生するような手順が必要なのかも。toeのある場所に保存先指定すれば最初からうまくいくらしい？（未確認）

21.2 方法② TOPを右クリックして保存（推奨）

TOPを右クリックしてSave Imageすることができる。一番簡単。

方法①は一定時間毎に保存したり、ある処理が完了した状態を保存する等、プログラムを行う場合に利用できる。